<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='文章管理',active='article'" th:fragment="userList">
<header th:replace="back/header::headerFragment(${title},${active})"></header>
<head>
    <meta th:name="deleteConfirm" th:content='确认删除该用户'/>
    <!-- 默认的header name是X-CSRF-TOKEN -->
</head>
<body class="fixed-left">
<div id="wrapper">
    <div th:replace="back/header::header-body"></div>
    <div class="content-page">
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <h4 class="page-title">用户管理</h4>
                    </div>
                    <div class="col-md-12">
                        <ol>
                        <table class="table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>用户名</th>
                                <th>邮箱</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <th:block th:each="user : ${userList.list}">
                                <tr th:id="${user.id}">
                                    <td><th:block th:text="${user.id}"/></td>
                                    <td><th:block th:text="${user.username}"/></td>
                                    <td><th:block th:text="${user.email}"/></td>
                                    <td>

                                        <a th:if="${user.valid==0}" href="javascript:void(0)" th:onclick="empowerUser([[${user.id}]])"
                                           id="type"  class="btn btn-primary btn-sm waves-effect waves-light m-b-5">
                                           <i class="fa fa-edit"></i> <span>授权</span></a>
                                        <a th:unless="${user.valid==0}" href="javascript:void(0)" th:onclick="deleteUser([[${user.id}]])"
                                           class="btn btn-danger btn-sm waves-effect waves-light m-b-5">
                                            <i class="fa fa-trash-o"></i> <span>禁用</span></a>
                                    </td>
                                </tr>
                            </th:block>
                            </tbody>
                        </table>
                        </ol>
                        <!-- 进行评论分页 -->
                        <div class="lists-navigator clearfix">
                            <ol class="page-navigator">
                                <!-- 判断并展示上一页 -->
                                <th:block th:if="${userList.hasPreviousPage}">
                                    <td class="prev"><a th:href="'?upage='+${userList.prePage}+'#userList'">上一页</a></td>
                                </th:block>
                                <!-- 判断并展示中间页 -->
                                <th:block th:each="navIndex : ${userList.navigatepageNums}">
                                    <th:block th:if="${userList.pages} <= 5">
                                        <td th:class="${userList.pageNum}==${navIndex}?'current':''">
                                            <a th:href="'?upage='+${navIndex}+'#userList'" th:text="${navIndex}"></a>
                                        </td>
                                    </th:block>
                                    <th:block th:if="${userList.pages} > 5">
                                        <td th:if="${userList.pageNum <=3 &&  navIndex <= 5}"
                                            th:class="${userList.pageNum}==${navIndex}?'current':''">
                                            <a th:href="'?upage='+${navIndex}+'#userList'" th:text="${navIndex}"></a>
                                        </td>
                                        <td th:if="${userList.pageNum >= userList.pages-2 &&  navIndex > userList.pages-5}"
                                            th:class="${userList.pageNum}==${navIndex}?'current':''">
                                            <a th:href="'?upage='+${navIndex}+'#userList'" th:text="${navIndex}"></a>
                                        </td>
                                        <td th:if="${userList.pageNum >=4 && userList.pageNum <= userList.pages-3 &&  navIndex >= userList.pageNum-2 && navIndex <= userList.pageNum+2}"
                                            th:class="${userList.pageNum}==${navIndex}?'current':''">
                                            <a th:href="'?upage='+${navIndex}+'#userList'" th:text="${navIndex}"></a>
                                        </td>
                                    </th:block>
                                </th:block>
                                <!-- 判断并展示下一页 -->
                                <th:block th:if="${userList.hasNextPage}">
                                    <td class="next"><a th:href="'?upage='+${userList.nextPage}+'#userList'">下一页</a></td>
                                </th:block>
                            </ol>
                        </div>
                    </div>
                </div>
                <div th:replace="back/footer :: footer-content"></div>
            </div>
        </div>
    </div>
</div>
<div th:replace="back/footer :: footer"></div>
<script type="text/javascript">
    function deleteUser(id) {
        // 获取<meta>标签中封装的_csrf信息
        var token = $("meta[name='deleteConfirm']").attr("content");
        var header = $("meta[name='deleteConfirm']").attr("content");

        if(confirm('确定禁用该用户吗?')){

            $.post(
                '/admin/deleteUserById',
                {id:id},

                function (data) {
                    if (data=="OK") {
                        window.alert("用户禁用成功");
                    } else {
                        window.alert("用户禁用成功")
                    }
                    window.location.reload();
                }
            );
        }
    }
    function empowerUser(id) {

        if(confirm('确定授权该用户吗?')){

            $.post(
                '/admin/empowerUserById',
                {id:id},

                function (data) {
                    if (data=="OK") {
                        window.alert("用户授权成功");
                    } else {
                        window.alert("用户授权成功")
                    }
                    window.location.reload();
                }
            );
        }
    }
</script>
</body>
</html>